<template>
  <div id="app">
<!--    头部信息-->
    <div class="header">
      <div class="title">GoEasy 示例</div>
      <div class="description">图片/视频/表情</div>
    </div>
<!--    输入框部分-->
    <div class="action-box">
      <div  class="text-message-box"><input type="text" v-model="textMessage" placeholder="输入消息"></div>
      <div class="message-send-btn" @click="sendTextMessage">发送</div>
      <!--    表情弹框-->
      <GoEasyExpression @onSelectExpression="sendExpression" appearanceClass="expression-icon" />
      <!--    文件选择-->
      <div class="file-icon"><input type="file" @change="sendFile" ref="myFile"></div>
      <GoEasyRecorder appearanceClass="appearance-class" @onComplete ="sendAudio" />
    </div>
<!--    消息展示部分-->
    <div class="container">
      <div class="message-scroll" ref="myScroll">
        <div class="message-box" v-for="(message, key) in demoService.messages" :key="key">
            <div class="message-box__item">
                <span style="padding-right: 10px;color: red">{{new Date().formatDate("hh:mm") + ' : '}}</span>
                <!-- 文本-->
                <span v-if="message.type == MessageType.TEXT">{{ message.content}}</span>
                <!-- 表情-->
                <img :src="expressions[message.content]"
                     v-if="message.type == MessageType.EXPRESSION">
                <!-- 图片-->
                <img v-if="message.type == MessageType.PICTURE"
                     :src="message.content"
                     @click="picture = {show:true, src:message.content}">
                <!-- 视频-->
                <GoEasyVideoPlayer v-if="message.type == MessageType.VIDEO" :src="message.content" />
                <!-- 音频-->
                <GoEasyAudioPlayer v-if="message.type == MessageType.AUDIO" :src="message.content" :duration="message.duration" />
            </div>
        </div>
      </div>
    </div>
<!--    图片预览-->
      <div class="preview-picture-layer" @click="picture.show = false" v-show="picture.show">
          <img :src="picture.src">
      </div>
<!--    loading-->
    <div class="show-loading" v-show="loading"></div>
  </div>
</template>

<script>
  import { MessageType } from "./assets/js/Message";
  import expressions from "./components/GoEasyExpression/expressions";
  import DemoService from "./assets/js/demoService";
  import GoEasyExpression from "./components/GoEasyExpression/GoEasyExpression";
  import GoEasyVideoPlayer from "./components/GoEasyVideoPlayer";
  import GoEasyRecorder from "./components/GoEasyRecorder";
  import GoEasyAudioPlayer from "./components/GoEasyAudioPlayer";
  export default {
    name: 'App',
    components : {
        GoEasyExpression,
        GoEasyVideoPlayer,
        GoEasyRecorder,
        GoEasyAudioPlayer
    },
    data () {
        return {
            expressions : expressions,
            MessageType : MessageType,
            demoService : null,
            loading : false,
            textMessage : '',
            picture : {
                show : false,
                src : ''
            }
        }
    },
    beforeMount() {
         this.demoService = new DemoService();
    },
    methods : {
        sendTextMessage () {//发送文本消息
            if(this.textMessage.trim() == "") return;
            this.demoService.sendTextMessage(MessageType.TEXT, this.textMessage);
            this.textMessage = "";
        },
        sendExpression (expression) {//发送表情
            this.demoService.sendTextMessage(MessageType.EXPRESSION,expression.tag);
        },
        sendFile (event) {//发送图片或视频
            this.loading = true;
            let file = event.target.files[0],
                type = file.type.indexOf('image') > -1 ? MessageType.PICTURE : MessageType.VIDEO,
                promise = this.demoService.sendFileMessage(type, file);
            promise.then(() => {
                this.loading = false;
                this.$refs.myFile.value = "";
            }, (e) => {
                this.loading = false;
                console.log(e)
            })
        },
        sendAudio (audio) {//发送语音
            this.loading = true;
            console.log(audio)
            let promise = this.demoService.sendAudio(audio.file, audio.duration);
            promise.then((e) => {
                console.log(e);
                this.loading = false
            })
        }
    }
  }
</script>

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html,body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .title{
        font-family: Source Han Sans CN;
        font-style: normal;
        font-weight: normal;
        text-align: center;
        color: #D02129;
    }
    #app{
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .description{
        text-align: center;
        color: #D02129;
        font-family: Source Han Sans CN;
        font-style: normal;
        font-weight: bold;
    }
    .action-box{
        width: 100%;
        background: #F3F3F3;
        display: flex;
        align-items: center;
        z-index: 35;
        justify-content: space-around;
        position: relative;
    }
    .text-message-box{
        flex-grow: 0;
    }
    .text-message-box input{
        height: 100%;
        background: #ffffff;
        color:#95949A;
        border: none;
        outline: none;
    }
    .message-send-btn{
        background: #D02129;
        text-align: center;
        color: #ffffff;
    }
    .expression-icon{
        background: url("./assets/images/face.png") no-repeat center;
    }
    .file-icon{
        background: url("./assets/images/file.png") no-repeat center;
        color: #9D9D9D;
        flex-grow: 0;
        position: relative;
    }
    .file-icon input{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        opacity: 0;
    }
    .appearance-class{
        background:url("./assets/images/audio.png") no-repeat center;
        background-size: 0.2rem;
    }
    .container{
        width: 100%;
        background: #F3F3F3;
        overflow: hidden;
    }
    .message-scroll{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
        background: #ffffff;
    }
    .message-box{
        flex-grow: 0;
        flex-shrink: 0;
        display: flex;
        flex-wrap: wrap;
    }
    .message-box__item{
        color: #000000;
        display: flex;
        align-items: flex-start;
    }
    .video-message{
        position: relative
    }
    .video-snapshot .icon{
        z-index: 20;
        top:50%;
        left:50%;
        background:url("./assets/images/play.png");
        background-size: 100%;
        position: absolute;
    }
    .show-loading{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: url("./assets/images/loading.gif") no-repeat center;
        z-index: 99;
    }
    @media screen and (max-width:1000px) {

        #app {
            width: 3.75rem;
            height: 100%;
        }
        .header{
            height:1.1rem ;
            padding: 0.2rem 0 0.13rem 0;
            background: #fff;
            font-size: 0.24rem;
            line-height: 0.25rem;
        }
        .title{
            font-size: 0.24rem;
            line-height: 0.25rem;
        }
        .description{
            height: 0.52rem;
            line-height: 0.52rem;
            font-size: 0.28rem;
        }
        .action-box{
            height: 1.03rem;
            font-size: 0.12rem;
            padding: 0.3rem 0;
        }
        .text-message-box{
            width: 1.5rem;
            height: 0.43rem;
            flex-grow: 0;
        }
        .text-message-box input{
            width:1.5rem;
            padding:0.03rem 0.5rem 0.03rem 0.1rem;
            font-size: 0.14rem;
        }
        .appearance-class{
            height: 0.26rem;
            width: 0.26rem;
            border-radius: 0.28rem;
        }
        .message-send-btn{
            height: 0.28rem;
            width: 0.6rem;
            line-height: 0.28rem;
            font-size: 0.12rem;
            border-radius: 0.05rem;
        }
        .expression-icon{
            height: 0.28rem;
            width: 0.28rem;
            background-size: 0.28rem;
        }
        .file-icon{
            height: 0.28rem;
            width: 0.28rem;
            background-size: 0.28rem;
        }
        .file-icon input{
            width: 0.24rem;
            height: 0.24rem;
        }

        .container{
            height: 4rem;
            padding: 0.1rem;
        }
        .message-scroll{
            padding: 0.1rem;
        }
        .message-box{
            font-size: 0.16rem;
            margin-bottom: 0.1rem;
            min-height: 0.28rem;
            max-height: 1.2rem;
        }
        .message-box__item{
            font-size: 0.15rem;
            line-height: 0.28rem;
        }

        .message-box__item img{
            max-width: 1.2rem;
            max-height: 1.2rem;
        }
        .video-message{
            position: relative
        }
        .video-snapshot .icon{
            width:0.3rem;
            height: 0.3rem;
            margin:-0.15rem;
            border-radius: 0.15rem;
        }
        .preview-picture-layer{
            position: fixed;
            top: 0;
            left: 0;
            background: #000000;
            z-index: 9999;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .preview-picture-layer img{
            max-width: 90%;
            max-height: 90%;
        }
        .show-loading{
            background-size: 0.2rem 0.2rem;
        }
    }

</style>
